<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #header {
            width: 100%;
            min-width: 1263px;
            height: 110px;
            background-color: #333333;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
            z-index: 9999;
        }
        #header .center {
            width: 1263px;
            height: 50px;
            margin: 0 auto;
        }
        #header .logo {
            width: 240px;
            height: 70px;
            background-image: url("img/3.3.jpg");
            text-indent: -999px;
            float: left;
        }
        #header .link {
            width: 875px;
            height: 70px;
            line-height: 76px;
            color: #eee;
            float: right;
        }
        #header .link li {
            width: 120px;
            text-align: center;
            float: left;
        }
        #header .link a {
            color: #eee;
            display: block;
        }
        #header .link a:hover,
        #header .active a {
            background-color:#222222;
        }
        #banner{
            width: 790px;
            height: 340px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        #banner ul{
            list-style-type: none;

        }
        #banner ul li{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        #banner .btn{
            width: 80px;
            height: 15px;
            background: yellow;
            position: absolute;
            bottom: 10px;
            z-index: 10;
            left: 50%;
            margin-left: -40px;
            padding-left: 5px;
            border-radius: 10px;
        }
        #banner .btn span{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            text-align: center;
            line-height: 15px;
            font-size: 12px;
            background: #fff;
            color: #000;
            float: left;
            margin-right: 5px;
            cursor: pointer;
        }
        #banner .dir{
            width: 100%;
            height: 100%;
        }
        #banner .dir span{
            width: 38px;
            height: 60px;
            background: #000;
            color: #fff;
            text-align: center;
            line-height: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            display: none;
        }
        #banner .dir .prev{
            left: 30px;
        }
        #banner .dir .next{
            right: 30px;
        }
    </style>
</head>
<body>
<header id="header">
    <div class="center">
        <h1 class="logo">好好贷</h1>
        <nav class="link">
            <ul>
                <li class="active"><a href="index.html">天猫</a></li>
                <li ><a href="#">喵，欢迎来天猫</a></li>
                <li><a href="#">请登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#"></a></li>
            </ul>
        </nav>
    </div>
</header>
<div id="banner">
    <ul>
        <li><img src="img/www.png" alt=""></li>
        <li><img src="img/qqq.png" alt=""></li>
        <li><img src="img/eee.png" alt=""></li>
        <li><img src="img/F%5B2~)~%7D6SH377OHHZ5)01SN.png" alt=""></li>
    </ul>
    <div class="btn">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <div class="dir">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.10.1(1).js"></script>
<script>
    $(function () {
        $("#banner ul li").first().show();
        $("#banner").hover(function () {
            $(".dir span").show();
            clearInterval(timer);
        },function () {
            $(".dir span").hide();
            timer = setInterval(slider,1000)
        })

        function box(_index) {
            $("#banner .btn span").eq(_index).addClass("active").siblings().removeClass("active");
            $("#banner ul li").eq(_index).fadeIn().siblings().fadeOut();
        }

        var _index = 0;
        $("#banner .btn span").mouseover(function () {
            _index = $(this).index();
            box();
        })
        $("#banner .next").click(function () {
            if(_index == $("#banner ul li").length - 1){
                _index = 0;
            }else{
                _index++;
            }
            box(_index);
        })

        $("#banner .prev").click(function () {
            if(_index == 0){
                _index = $("#banner ul li").length - 1;
            }else{
                _index--;
            }
            box(_index);
        })
        function slider() {
            if(_index == $("#banner ul li").length - 1){
                _index = 0;
            }else{
                _index++;
            }
            box(_index)
        }
        var timer = setInterval(slider,1000)
    })
</script>
